<template>
  <a-form :form="form" layout="vertical" @submit.prevent="handleSubmit">
    <a-spin :spinning="spinning">
      <a-form-item>
        <a-input v-if="isSuccess" disabled v-model="userName">
          <a-icon slot="prefix" type="user" />
        </a-input>
      </a-form-item>
      <!--密码-->
      <a-form-item>
        <a-input
          :placeholder="$t('pro.loginReg.passwordPla')"
          v-decorator="[
                      'passwordDigest',
                      {
                        rules: [{
                          required: true, message: $t('pro.loginReg.passwordMess'),
                        }, {
                          validator: validateToPassword,
                        }],
                      }
                ]"
          :type="visiblePassword?'text':'password'"
        />
      </a-form-item>
      <!--确认密码-->
      <a-form-item>
        <a-input
          :placeholder="$t('pro.loginReg.cofPas')"
          v-decorator="[
                  'confirm',
                  {
                    rules: [{
                      required: true, message: $t('pro.loginReg.cofPasMess'),
                    }, {
                      validator: compareToFirstPassword,
                    }],
                  }]"
          :type="visiblePassword?'text':'password'"
          @blur="handleConfirmBlur"
        />
      </a-form-item>

      <a-form-item>
        <a-button type="primary" html-type="submit" block v-text="$t('pro.loginReg.resetPassword')"></a-button>
      </a-form-item>
    </a-spin>
  </a-form>
</template>

<script>
import { judgeToken, modifyPassword } from "../../api/login";
import { vPassword } from "../../utils/validate";
export default {
  name: "Password",
  data() {
    return {
      form: this.$form.createForm(this),
      visiblePassword: false,
      token: "",
      userName: "",
      isSuccess: false,
      spinning: false
    };
  },
  methods: {
    handleSubmit() {
      this.spinning = true;
      this.form.validateFields((err, formData) => {
        if (err == null) {
          let params = {
            password: formData["passwordDigest"],
            resetPasswordToken: this.token
          };
          modifyPassword(params)
            .then(res => {
              setTimeout(() => {
                this.spinning = false;
                this.$emit("judgeTokenURL", {
                  show: false,
                  pwdToKen: this.token
                });
                this.$router.push("/login");
              }, 1000);
            })
            .catch(() => {
              this.spinning = false;
              this.$emit("judgeTokenURL", { show: false, pwdToKen: "" });
              this.$router.push("/login");
            });
        }
      });
    },

    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },

    validateToPassword(rule, value, callback) {
      if (value) {
        if (vPassword(value)) {
          callback();
        } else {
          callback(this.$t("pro.loginReg.passwordWra"));
        }
      } else {
        // 账号或密码为空执行回调, 参数为空字符串,
        // 以显示对应模板中input required msg
        callback("");
      }
    },

    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("passwordDigest")) {
        callback(this.$t("pro.loginReg.cofPasWar"));
      } else {
        callback();
      }
    }
  },
  created() {
    //console.log(this.$route.query); /aaa.com/index/params 这种方式不行
    this.token = this.$route.params.token || "";

    this.$emit("judgeTokenURL", { show: true, pwdToKen: this.token });

    judgeToken(this.token).then(res => {
      let data = res.data.data;
      if (data) {
        (this.isSuccess = true), (this.userName = data.email);
      }
    });
  }
};
</script>

<style scoped>
</style>
